import Vue from 'vue'
import VueRouter from 'vue-router'
import { Loading } from 'element-ui'

Vue.use(VueRouter)
// 因为这里通过export 导出去了，所以其他的页面可以通过import { routes } from '@/router'来引入
export const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/home.vue'),
    meta: {
      title: '首页',
    },
  },
  {
    path: '/customModel',
    name: 'CustomModel',
    component: () => import('../views/customModel.vue'),
    meta: {
      title: '自定义v-model封装',
    },
  },
  {
    path: '/slot',
    name: 'SlotDemo',
    component: () => import('../views/slot.vue'),
    meta: {
      title: 'slot插槽',
    },
  },
  {
    path: '/drag',
    name: 'Drag',
    component: () => import('../views/drag.vue'),
    meta: {
      title: '拖拽',
    },
  },
  {
    path: '/scrollLoad',
    name: 'ScrollLoad',
    component: () => import('../views/scrollLoad.vue'),
    meta: {
      title: '滚动加载',
    },
  },
  {
    path: '/swiper',
    name: 'Swiper',
    component: () => import('../views/swiper.vue'),
    meta: {
      title: 'swper轮播图',
    },
  },
  {
    path: '/splitPane',
    name: 'SplitPaneDemo',
    component: () => import('../views/splitPane.vue'),
    meta: {
      title: '面板分割',
    },
  },
  {
    path: '/dynamicAnchor',
    name: 'DynamicAnchor',
    component: () => import('../views/dynamicAnchor.vue'),
    meta: {
      title: '动态锚点',
    },
  },
  {
    path: '/swipeAction',
    name: 'SwipeAction',
    component: () => import('../views/swipeAction.vue'),
    meta: {
      title: '右滑模块加载更多',
    },
  },
  {
    path: '/customSort',
    name: 'CustomSort',
    component: () => import('../views/customSort.vue'),
    meta: {
      title: '自定义排序',
    },
  },
  {
    path: '/localForage',
    name: 'LocalForage',
    component: () => import('../views/localForage.vue'),
    meta: {
      title: 'localForage储存',
    },
  },
  {
    path: '/table',
    name: 'Table',
    component: () => import('../views/table.vue'),
    meta: {
      title: 'table表格',
    },
  },
  {
    path: '/watermark',
    name: 'Watermark',
    component: () => import('../views/watermark.vue'),
    meta: {
      title: '水印',
    },
  },
  {
    path: '/ceshi',
    name: 'Ceshi',
    component: () => import('../views/ceshi.vue'),
    meta: {
      title: '测试功能',
    },
  },
  {
    path: '/grid',
    name: 'Grid',
    component: () => import('../views/grid.vue'),
    meta: {
      title: 'grid布局',
    },
  },
  {
    path: '/exportPdf',
    name: 'ExportPdf',
    component: () => import('../views/exportPdf.vue'),
    meta: {
      title: '导出pdf',
    },
  },
  {
    path: '/regular',
    name: 'Regular',
    component: () => import('../views/regular.vue'),
    meta: {
      title: '正则表达式',
    },
  },
  {
    path: '/studyKeepAlive',
    name: 'StudyKeepAlive',
    component: () => import('../views/studyKeepAlive.vue'),
    meta: {
      keepAlive: true, // 需要被缓存
      title: '学习keep-alive',
    },
  },
  {
    path: '/previewFile',
    name: 'PreviewFile',
    component: () => import('@/views/previewFile.vue')
  },
  {
    path: '/imageEditor',
    name: 'ImageEditor',
    component: () => import('@/views/imageEditor.vue')
  }
]

const router = new VueRouter({
  routes,
})
let loadingInstance
router.beforeEach((to, from, next) => {
  loadingInstance = Loading.service({
    fullscreen: true,
    text: '正在加载中。。。',
  })
  next()
})
router.afterEach((to) => {
  setTimeout(() => {
    loadingInstance.close()
  }, 0)
  document.title = to?.meta?.title || 'vue-demo'
})
export default router
